<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button class="btn">按钮1</button>
		<button class="btn">按钮2</button>
		<button class="btn">按钮3</button>
		<button class="btn">按钮4</button>

		<script>
			var btnEls = document.querySelectorAll('.btn')

			// 解决方法: 1. 使用let形成块级作用域; 2. 立即执行函数形成函数作用域(闭包)
			for (var i = 0; i < btnEls.length; i++) {
				var btnEl = btnEls[i]
				// debugger
				;(function (i) {
					btnEl.addEventListener('click', function () {
						console.log(`按钮${i + 1}被点击`)
					})
				})(i)
			}

			// 立即执行函数表达式其他写法
			// 报错, 立即执行函数表达式必须是一个表达式, 不能是函数声明, 我们可以将函数声明转化为函数表达式写法
			/* function fn() {

      }() */

			// 立即执行函数表示式1
			// ;+(function fn() {})()

			// 立即执行函数表示式2
			// !(function fn() {})()

			// 立即执行函数表示式3
			// ;(function () {})()

			// 立即执行函数表示式4
			// ;(function () {})()
		</script>
	</body>
</html>
